<template>
  <div class="shaoma-lists">
    <loading v-if="loadingShow"></loading>
    <div class="shaoma-lists-main">
      <ul>
        <li v-for="(item, index) in lists" :key="index">
          <div class="lists-banner">
            <div>
              <h3>{{item.productName}}</h3>
              <p>{{item.sampleName}}</p>
              <p>{{item.sampleNum}}</p>
              <img src="../assets/img/roboto@2x.png" alt="">
            </div>
          </div>
          <div class="lists-desc">
            <p>状态：<span class="state-b">已提交</span></p>
            <router-link :to="{ name: 'sjView', params: { Id: item.sampleNum }}"><button class="state-b">查看详情</button></router-link>
          </div>
        </li>
      </ul>
    </div>
    <div class="shaoma-footer flex-box">
      <router-link to="/shaoma"><button class="commit active">添加新送检单</button></router-link>
    </div>
  </div>
</template>
<script>
// import { mapActions, mapState } from "vuex";
import stepBar from '@/quanjiyin/components/StepBar.vue'
import loading from '@/quanjiyin/components/Loading.vue'

export default {
  name: 'sjlists',
  data() {
    return {
      lists: '',
      loadingShow: true
    }
  },
  components: {
    stepBar,
    loading
  },
  methods: {},
  mounted() {
    this.$axios
      .get('/data/quanjiyin-data/lists.json')
      .then(res => {
        console.log(res)
        this.loadingShow = false
        this.lists = res.data.result.RL
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>
<style lang="scss" scoped>
.shaoma-lists {
  width: 100%;
  min-height: 100vh;
  .shaoma-lists-main {
    max-width: 750px;
    margin: 0 auto;
    padding-left: r(15);
    padding-right: r(15);
    padding-bottom: r(70);
    box-sizing: border-box;
    ul {
      width: 100%;
      display: inline-block;
      padding-top: r(18);
      li {
        width: 100%;
        float: left;
        border-radius: r(8);
        overflow: hidden;
        margin-bottom: r(18);
        background: #fff;
        box-shadow: 0 12px 32px rgba($color: #e1f0fd, $alpha: 0.8);
        .lists-banner {
          width: 100%;
          padding-bottom: 41.7%;
          background: -webkit-linear-gradient(left, #63c9ff, #70bfff);
          background: linear-gradient(to right, #63c9ff, #70bfff);
          position: relative;
          & > div {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            text-align: left;
            h3 {
              font-size: r(18);
              color: #fff;
              margin-left: r(15);
              margin-top: r(32);
              margin-bottom: r(18);
            }
            p {
              font-size: r(12);
              color: #fff;
              margin-left: r(15);
              margin-bottom: r(16);
            }
            img {
              width: r(120);
              bottom: 0;
              right: r(10);
              position: absolute;
            }
          }
        }
        .lists-desc {
          width: 100%;
          padding: r(9);
          box-sizing: border-box;
          overflow: hidden;
          line-height: r(35);
          p {
            float: left;
            font-size: r(14);
            color: #ccc;
            span.state-a {
              color: #ff8872;
            }
            span.state-b {
              color: #6ac3ff;
            }
          }
          button {
            width: r(104);
            height: r(35);
            border-radius: r(6);
            border: none;
            outline: none;
            color: #fff;
            float: right;
            box-sizing: border-box;
            &.state-a {
              background: -webkit-linear-gradient(left, #ff8c71, #ff7a7a);
              background: linear-gradient(to right, #ff8c71, #ff7a7a);
            }
            &.state-b {
              background: none;
              border: 1px solid #6ac3ff;
              color: #6ac3ff;
            }
          }
        }
      }
    }
  }
  .shaoma-footer {
    z-index: 666;
    background: #eff6fd;
  }
}
</style>
